<template>
  <div class="container">
    <div class="content">
      <div class="back_icon">
        <van-icon name="arrow-left" color="#ffffff" />
      </div>
      <div class="bag"></div>
      <div class="info">
        <div class="user_info">
          <div class="title">个人信息</div>
          <div class="person_info">
            <!-- <van-cell-group>
              <van-cell  v-for="item in state.data.userInfo&&state.data.userInfo.personInfo" :title="item.text" :value="item.value" />
            </van-cell-group> -->
            <div
              v-for="item in state.data.userInfo &&
              state.data.userInfo.personInfo"
              class="item"
            >
              <div class="item_left">
                {{ item.text }}
              </div>
              <div class="item_right">
                <span v-if="!Array.isArray(item.value)">{{ item.value }}</span>
                <template v-else>
                  <Tag
                    v-for="item2 in item.value"
                    :text="item2.text"
                    :color="item2.color"
                    style="margin-right: 1rem"
                  />
                </template>
              </div>
            </div>
          </div>
          <div class="title">家庭成员</div>
          <div class="member_info">
            <div
              class="item"
              v-for="item in state.data.userInfo &&
              state.data.userInfo.familyMembers"
            >
              <div class="item-left">
                <van-image
                  round
                  width="3rem"
                  height="3rem"
                  :src="item.avatar"
                />
              </div>
              <div class="item-right">
                <div class="top">
                  <div class="name">{{ item.name }}</div>
                  <div class="age">{{ item.age }}岁</div>
                  <van-image
                    class="sex"
                    round
                    width="1.5rem"
                    height="1.5rem"
                    :src="state.sexIcon[item.sex]"
                  />
                </div>
                <div class="bottom">
                  <div>关系:</div>
                  <div>{{ item.relationship }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 15vh"></div>
      </div>
      <div class="function_list">
        <div class="avatar">
          <van-image
            round
            width="5rem"
            height="5rem"
            :src="state.data.avatar"
          />
        </div>
        <div class="name">{{ state.data.name }}</div>
        <Tag
          :text="state.data.status"
          color="green"
          style="margin-bottom: 1rem; margin-top: 0.3rem"
        />
        <div class="function">
          <div class="item" v-for="item in state.data.functionList">
            <div class="icon"><van-icon :name="item.icon" size="25" /></div>
            <div class="desc">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_btn">
      <van-button
        type="primary"
        color="#4ab8ab"
        style="border-radius: 8px; width: 92%"
        >添加服务</van-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import Tag from "./components/Tag.vue";
import { onMounted, reactive } from "vue";
import {UserInfo} from './entity/index'
import axios from "axios";
interface state{
  data: UserInfo,
  sexIcon:any
}
const state= reactive<state>({
  data: {},
  sexIcon: {
    男: "http://localhost:5173/image/y.jpg",
    女: "http://localhost:5173/image/x.jpg",
  },
});

onMounted(() => {
  axios.get("/enrollmentTime").then((res) => {
    state.data = res.data.data;
    console.log(res.data, state.data);
  });
});
</script>
<style scoped>
</style>
